---
type: tutorial
title: 개발 환경 준비
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 - 튜토리얼을 완료하는 데 필요한 로컬 도구 설치
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Astro 웹 사이트를 구축하는 데 사용할 도구를 설치하십시오.
</PreCheck>

## 필요한 개발 도구를 확보하세요

### 터미널

**명령줄 (터미널)** 을 사용하여 Astro 프로젝트를 만들고 주요 명령을 실행하여 사이트를 빌드, 개발, 테스트하게 됩니다.

운영 체제의 로컬 터미널 프로그램을 통해 명령줄에 액세스할 수 있습니다. 일반적인 애플리케이션으로는 **터미널** (MacOS/Linux), **명령 프롬프트** (Windows), **Termux** (Android)가 있습니다. 이들 중 하나는 이미 여러분의 컴퓨터에 있을 것입니다.

### Node.js

Astro를 시스템에서 실행하려면 [**Node.js**](https://nodejs.org/en/) 버전 `v18.14.1` 이상이 설치되어 있어야 합니다.

호환되는 버전이 이미 설치되어 있는지 확인하려면 터미널에서 다음 명령을 실행하세요.

```sh
node -v

// 예시 출력
v18.14.1
```

명령이 `v18.14.1`보다 높은 버전 번호를 반환하면 문제가 없습니다!

명령이 `Command 'node' not found` 같은 오류 메시지를 반환하거나 `v18.14.1`보다 낮은 버전 번호를 반환하는 경우 호환되는 Node.js 버전을 설치해야 합니다.

### 코드 편집기

또한 코드를 작성하려면 **코드 편집기**를 다운로드하여 설치해야 합니다.

:::tip[우리가 사용할 도구]
이 튜토리얼에서는 **VS Code**를 사용하지만 운영 체제에 맞는 모든 편집기를 사용할 수 있습니다.
:::

<Steps>
1. [VS Code](https://code.visualstudio.com/#alt-downloads) 또는 원하는 다른 코드 편집기를 다운로드하여 설치합니다.
</Steps>

<Box icon="question-mark">

### 지식을 테스트해보세요

다음 중 어느 것이...

1. 파일과 콘텐츠를 변경하기 위한 코드 편집기입니까?

    <MultipleChoice>
      <Option>
        웹 브라우저
      </Option>
      <Option>
        터미널
      </Option>
      <Option isCorrect>
        VS Code
      </Option>
    </MultipleChoice>

2. 여러분의 저장소에 대한 온라인 버전 제어 공급자입니까?

    <MultipleChoice>
      <Option isCorrect>
        GitHub
      </Option>
      <Option>
        터미널
      </Option>
      <Option>
        VS Code
      </Option>
    </MultipleChoice>

3. 명령을 실행하기 위한 애플리케이션입니까?

    <MultipleChoice>
      <Option>
        GitHub
      </Option>
      <Option isCorrect>
        터미널
      </Option>
      <Option>
        웹 브라우저
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">
## 계속 진행하기 위한 체크리스트

<Checklist>
- [ ] 터미널에서 명령줄에 액세스할 수 있습니다.
- [ ] Node.js가 설치되어 있습니다.
- [ ] VS Code와 같은 코드 편집기가 있습니다.
</Checklist>
</Box>

### 추가 자료

- <p>[FreeCodeCamp.org](https://freecodecamp.org) <Badge>외부 링크</Badge> — HTML, CSS, JS 등의 전체 과정이나 간단한 재교육을 제공하는 무료 교육 사이트입니다.</p>